<template>
	<view>
		<view style="height: 24rpx;"></view>
		<view class="pay_bond_top_box">
			<view class="pay_bond_top_name">到账方式</view>
			<!-- <view class="pay_bond_top_way">
				<image src="https://www.cccshansong.com/chong_weapp/wechat_icon.png" mode=""></image> <text>微信零钱</text>
			</view>	 -->
			<view class="profit_content_top_item">
				<picker class="log-picker" @change="bindPickerChange" :value="shou_index" :range="shou_array">
					<view class="picker-wrap">
						<view class="picker-input">{{shou_array[shou_index]}}</view>
						<image class="picker-icon" src="https://www.cccshansong.com/chong_weapp/bottom_black.png"></image>
					</view>
				</picker>
			</view>
		</view>
		<view class="pay_bond_content_box">
			<view class="pay_bond_content" @click="handleOpenBoard()" v-if="selected_type === '1'">
				<view class="pay_bond_content_title">请输入提现金额</view>
				<view class="pay_bond_content_input">
					<text>¥</text>{{bond_money}}
				</view>
			</view>
			<view class="pay_bond_content"  v-if="selected_type === '2'">
				<view class="pay_bond_content_title">请输入提现金额</view>
				<view class="pay_bond_content_input">
					<text>¥</text>{{deposit}}
				</view>
			</view>
			<view class="pay_bond_content"  v-if="selected_type === '3'">
				<view class="pay_bond_content_title">请输入提现金额</view>
				<view class="pay_bond_content_input">
					<text>¥</text>{{deposit2}}
				</view>
			</view>
			<view class="user_money_box" v-if="selected_type === '1'">
				  当前余额{{available}}元，<text @click="handleInput()">全部提现</text>
			</view>
			<view class="pay_radio_box">
				<radio-group v-model="selected_type" @change="radioChange">
				      <label class="custom-radio">
				        <radio  color="#418AFF" value="1" :checked="selected_type === '1'">账户余额</radio>
				      </label>
				      <label>
				        <radio color="#418AFF" value="2" :checked="selected_type === '2'">外卖保证金</radio>
				      </label>
				      <label>
				        <radio color="#418AFF" value="3" :checked="selected_type === '3'">帮买帮送保证金</radio>
				      </label>
				</radio-group>
			</view>
		</view>
		<view class="pay_bond_content_btn" hover-class="hover_class" @click="handleSubmit()">立即提现</view>
		<cu-keyboard ref="cukeyboarditem" :defaultValue='defaultValueItem' confirmText='确定' :confirmStyle='confirmStyle'
			@change="changeItem"></cu-keyboard>

	</view>
</template>

<script>
	import cuKeyboard from "@/components/cu-keyboard/cu-keyboard";
	export default {
		components: {
			cuKeyboard,
		},
		data() {
			return {
				shou_array:['银行卡','收款码'],
				shou_index:0,
				available:'',
				selected_type: '1',
				user_bond:0,
				confirmStyle:{
					backgroundColor:'#418AFF'
				},
				defaultValue:'',
				defaultValueItem:'',
				bond_money:'0',
				btn_status:true,
				timeStamp:'',
				nonceStr:'',
				package:'',
				signType:'',
				paySign:'',
				delivery_reminder:'',
				deposit:'',
				deposit2:'',
			};
		},
		onLoad(e) {
			var a = this
			a.getUserInfo()
		},
		methods:{
			bindPickerChange: function(e) {
			    this.shou_index = e.detail.value
			},
			handleInput(){
				var a =this
				a.defaultValueItem = a.available;
				a.bond_money = a.defaultValueItem;
			},
			getUserInfo(){
				var a =this
				a.globalajax('user/info',{
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							a.deposit = res.data.data.info.deposit
							a.deposit2 = res.data.data.info.deposit2
							a.available = res.data.data.info.available
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							});
						}
					}
				);
			},
			radioChange(e){
				var a = this;
				console.log(e.detail.value)
				a.selected_type = e.detail.value
			},
			handleSubmit(){
				var a = this
				if(a.selected_type=='1'){
					if(a.bond_money=='0' || a.bond_money=='0.0'){
						uni.showToast({
							title:'请输入提现金额',
							icon:'none'
						})
					}else{
						if(a.btn_status){
							var to_account = 0
							if(a.shou_index==0){
								to_account = 1
							}else{
								to_account = 2
							}
							a.btn_status = false
							uni.showLoading({
								title:'加载中'
							})
							a.globalajax('user/withdrawal',{
								price:a.bond_money,
								type:a.selected_type,
								to_account:to_account
							},'POST',function(res) {
									console.log(res);
									uni.hideLoading()
									setTimeout(()=>{
										a.btn_status = true
									},1500)
									if(res.data.code==200){
										uni.setStorage({
										  key: 'withdrawalInfo',
										  data: res.data.data,
										  success: function () {
										    uni.redirectTo({
										    	url:'/pages/user/withdrawalSucc'
										    })
										  }
										});

									}else{
										a.$showModal({
											title:'友情提示',
											content:res.data.msg,
											showCancel:false,
											confirmText:'我知道了',
											success: (res) => {
											}
										});
									}
								}
							);
						}
					}
				}else{
					if(a.btn_status){
						a.btn_status = false
						uni.showLoading({
							title:'加载中'
						})
						a.globalajax('user/withdrawal',{
							price:a.deposit,
							type:a.selected_type
						},'POST',function(res) {
								console.log(res);
								uni.hideLoading()
								setTimeout(()=>{
									a.btn_status = true
								},1500)
								if(res.data.code==200){
									uni.setStorage({
									  key: 'withdrawalInfo',
									  data: res.data.data,
									  success: function () {
									    uni.redirectTo({
									    	url:'/pages/user/withdrawalSucc'
									    })
									  }
									});

								}else{
									a.$showModal({
										title:'友情提示',
										content:res.data.msg,
										showCancel:false,
										confirmText:'我知道了',
										success: (res) => {
										}
									});
								}
							}
						);
					}
				}
			},
			handleOpenBoard(index){
				console.log(index)
				var a = this
				a.defaultValueItem = a.bond_money
				this.$refs.cukeyboarditem.open();
			},
			changeItem(e) {
				var a = this
				this.$nextTick(() => {
					a.defaultValueItem = e;
					a.bond_money = a.defaultValueItem;
				})
				this.$forceUpdate();
				console.log("数字改变", e);
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f5f6f8;
}
.user_money_box{
	margin-left: 30rpx;
	font-size: 28rpx;
	margin-bottom: 20rpx;
	text{
		color: #ff6b00;
	}
}
.pay_radio_box{
	margin-left:10rpx;
	padding-bottom: 30rpx;
	radio{
		margin-right:40rpx;
		scale: 0.8;
	}


}
.pay_bond_content_box{
	width: 686rpx;
	min-height: 204rpx;
	background-color: #fff;
	margin: 0 auto;
	margin-top: 20rpx;
	border-radius: 16rpx;
	.pay_bond_content{
		width: 686rpx;
		height: 204rpx;
		.pay_bond_content_title{
			padding-top: 24rpx;
			padding-left: 24rpx;
			color: rgba(48, 49, 51, 1);
			font-size: 30rpx;
			font-weight: bold;
		}
		.pay_bond_content_input{
			padding-left: 24rpx;
			color: rgba(48, 49, 51, 1);
			font-size: 72rpx;
			font-weight: bold;
			margin-top: 30rpx;
			text{
				font-size: 36rpx;
				margin-right: 8rpx;
			}
		}
	}
	.pay_bond_tip_box{
		height: 88rpx;
		line-height: 88rpx;
		border-top: 2rpx solid rgba(235, 238, 245, 1);
		text{
			margin-left: 24rpx;
			color: rgba(48, 49, 51, 1);
			font-size: 28rpx;
		}
	}
}
.pay_bond_content_btn{
	margin: 0 auto;
	margin-top: 64rpx;
	width: 686rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #fff;
	font-size: 30rpx;
	border-radius: 12rpx;
	/*background-color: rgba(255, 107, 0, 1);*/
	background: #418AFF;
}
.pay_bond_top_box{
	width: 686rpx;
	height: 120rpx;
	background-color: #fff;
	margin: 0 auto;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.pay_bond_top_name{
		margin-left: 24rpx;
		color: rgba(48, 49, 51, 1);
		font-size: 30rpx;
		font-weight: bold;
	}
	.profit_content_top_item{
		width: 343rpx;
		height:88rpx;
		margin-right: 30rpx;
		picker {
			width: 343rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.picker-wrap{
			width: 343rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-left: 20rpx;
			// justify-content: center;
		}
		.picker-input {
			font-size: 30rpx;
			color: #303133;
			line-height:88rpx;
			text{
				// font-weight: 400;
				font-size: 26rpx;
				margin: 0 6rpx;
			}
		}
		.picker-icon {
			display: inline-block;
			width: 32rpx;
			height: 32rpx;
			margin-left: 10rpx;
			line-height: 50rpx;
		}
		.log-picker {
			display: flex;
			align-items: center;
			width: 343rpx;
			height: 88rpx;
			.picker-wrap {
				display: flex;
				align-items: center;
			}
		}
	}
	.pay_bond_top_way{
		display: flex;
		align-items: center;
		margin-right: 24rpx;
		color: rgba(48, 49, 51, 1);
		font-size: 30rpx;
		image{
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}
	}
}
</style>
